Bagaimana custom progres bar 
Salah satu cara implementasi timer 
Dan providers 

Pertma buat stl widget 

myApp 

materialApp 

home scafold 

appbar appbar title 


import 


void main() => runApp(MyApr 


lass MyApp extends 
@override 
st build(BuildCo xt context) { 
return Mate 11A ( 
home: Scaffold( 
appBar: AppBar(title: Text( 
body: Center(), 


dibwah buat satu buah class untuk custom progress bar nya 
lebih baik file terpisah 

karena lebih cepat buat disni saja 

stl customProgressbar 

satu buat varibael lebar 

lalu buat constructor custom this. Lebar nya 

dan parameter nya 

lalu return nya Row 

main axis Center 

didalmnya ada childrren masukan icon . timer 

lalu dibawah buat stack 

didalam buat container nya 

nah ide nya seperti apa didalam stack 2 buah container 
container pertama untuk backround dari progress bar nya 
progres bar nya kalau kosong seperti apa kalau belum penuh 
lalu didepan ada container nya lagi kasih warna yg kalau sudah penuh sudah berisi 
nya 

container pertama widht nya sebesar paramter nya 


height juga bisa minta buat paramter disni di tentukan saja 


mandat e 


build( context) { 
return ( 
mainAxisAlignment: .center, 
children: « »[ 
( .timer), 
( 
children: « >[ 
( 
width: width, 
height: 10, 
decoration: (color: -grey[400]), 


)s 


Dn t 


Lalu tambahakn material child nya animated container duratio nya 500 atau 
setengah detik 

Decoratio nya box decoration color . lightGreen 

Disini heigh kasih 10 juga 

Width kasih stengah nya dahulu agar kelihatan ada backround dan ada field nya 
Jgn lupa border radius 


neigne: iv, 
decoration: ( 

color: .grey[400], 

borderRadius: .circular(5)), 


( 
child: 
height: 10, 
width: width * 0.5, 
duration: (milliseconds: 500), 
decoration: ( 
color: .lightGreen, 
borderRadius: .circular(5)), 


T 


Lalu di material juga sama 


neignt: 
decoration: t 
color: 


10, 
oration( 
lors.grey[400], 
BorderRadius. 


xDe 


borderRadius: 
P 
Material( 
borderRadius: 
child: AnimatedCont 
height: 10, 
width: width * 0.5, 
duration: Dur 
decoration: BoxDecoration( 
color: € s.lightGreen, 


BorderRadi 


borderRadius: 


Launching lib\main.dart on RNE L22 in debug mode... 


Type here t 


tam 


"E ^ o 
Lalu bahkan di myapp nya 


Kasih lebar buat 200 


lessWidget { 
build(BuildContext context) { 
Materi Dp 
home: 
appBar: 


scaffold( 


AppBar( 


RL AKPOUNTS. 


Maka hasinya seperti ini 


ation(milliseconds: 


circular(5)), 


tadius.circular(5), 


500), 


is. circular(5)), 
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ild(Build text context) { 


D/OpenGLKenderer( 28629): Swap behavior 2 

D/mali_winsys(28629): EGLint new window surface(egl winsys splay *, void 
_surface **, egl color buffer format *, EGLBoo 

D/mali winsys(28629): EGLint new window surface(egl winsys display *, void 
zi face **, egl color buffer format *, EGLBoolean) retur 


W/InputMethodManager(28629): startInputReason = 1 


W/InputMethodManager(28629): startInputReason = 5 


aereo JB 


decoration: Bc coration( 
color: Colors.grey[300], 
borderRadius: BorderRadius.circular(5)), 


.circular(5) 
child: 
height: 10, 
width: width * ð. 
duration: Duration(milliseconds: 
decoration: BoxDecora i( 
color: s.lightGreen, 
borderRadius: 


D/mal1 winsy 29): EGLint new window surtace(egi winsys display ", void 
, egl color buffer format *, EGLBoolean) returns 0x3000 
EGLint new window surface(egl winsy isplay ", 
surface , egl color buffer format *, EGLBoolean) returns 0x3000 
W/InputMethodManager( 28629): startInputReason 1 
W/InputMethodManager(28629): startInputReason = 5 


BRL AKPOINTS 


eloaded 1 of 462 libraries in 816ms. 


"aeeseeo ts 


Sperti ini 
Bayangan masih kurang kasih elevation 


decoration: 


color: -grey[300], 


borderRadius: 
)s 
( 
borderRadius: 
elevation: 
child: 


.circular(5)), 


.circular(5) 


duration: (milliseconds: 


decoration: 


( 


color: .lightGreen, 


borderRadius: 


D/maii winsys(28629): EGLint new window surtace( 
_surface **, egl color buffer format *, EGLBoole 
W/InputMethodManager(28629): startInputReason 
W/InputMethodManager(28629): startInputReason = 
Reloaded 1 of 462 libraries in 816 

Reloaded 1 of 462 libraries in 654ms. 


Reloaded 1 of libraries in 


af Type here to sem 


Kasih jarak 

Dari icon ke progres bar nya 
Kasih sized box 

Widht 5 


VARIABLES 


build( context) { 
irn ( 
mainAxisAlignment: 
children: « »[ 
( . timer), 
(width: 5 
( 
children: < >[ 
( 
width: width, 
height: 10, 
decoration: 
color: -grey[3 
borderRadiu 
); 
( 
CAU STACK borderRadius: 


surtace 
W/InputMethodManager(28629): startInputReason = 
W/InputMethodManager(28629): startInputReason = 
Reloaded 1 of 462 libraries in 816ms 


Reloaded of 462 libraries in 654ms 


P 


1 
Reloaded 1 of 462 librarie 
1 


" r Reloaded of 462 libraries 


Sekarang lebih bagus ada jarak nya 
Icon Timer nya kasih warna 
Pasang yg gelap 


.circular(5)), 


egi winsys display *, void 
an) returns 0x3000 

1 

5 


.center, 


( 
ee], 


.circular(5)), 


.circular(5), 


**, egl color butter tormat *, EGLBoolean) returns 0x3000 


Cu: 


tom Progress Bar 


Custom Progress Bar 


build( 
irn ( 


context) 


mainAxisAlignment: 


children: < 


>[ 


( .timer, color: 


[ 


t 


„center, 


-grey[700],), 


Custom Progress Bar 


(width: 5,), 
( 


children: < »[ 


( 
width: width, 
height: 10, 
decoration: 

color: -grey[ In 
borderRadius: .circular(5)), 
); 

( 

borderRadius: .circular(5) 


W/ LnputMethoc r(28629): startinputkeas 
Reloaded 1 of 1 pies in 816ms. 


Reloaded 


of libr in 


Reloaded 


1 

1 libraries in 6 
Reloaded 1 o 

1 

1 


libraries in 


Reloaded libraries in 668ms. 


i AKPOUNTS 
689ms. 


Reloaded libraries in 


Tingal tambhakan dua buah variabel lagi 
Finaal double value 
TotalValue 


Lalu constructor nya 


width; 
value; 
totalValue; 

({ -width, 


.value, .totalValue)): 


build ( 


return ( 


context) ( 


mainAxisAlignment: 
children: « >[ 


.center, 


( .timer, color: 
(width: 5,), 


-grey[720],), 


' BL 


W/inputMethodManager( 28629): 
Reloaded 1 of 462 lit 
Reloaded of 462 lit 
462 
462 
462 li 


startinputReason - 5 
816ms. 


654ms. 


aries i 


633ms. 
747ms. 


668ms. 


Reloaded of libraries 
Reloaded of 
Reloaded of 

BRLAKPOINTS 

moo Reloaded 


Si totalValue isi nya apa isi Maxsimum jika dia full isnya berapa misalkan 100 
Value nya saat ini 

Jadi misalkan total nya 100 isinya stengah 50 

Maka kita coba 


libraries in 689ms. 


Widht nya 200 terus value nya 10 total 100 


No Configurations "GP 


zu 
override 


build(Build text context) ( 


home: 
appBar: 
title: 
», 
body: 
child: mProgr 3ar(width: 200, value: 10, totalValue: 10@,), 


» 


width; 


W/ LnputMethodManager( 28629): startinputReason = 5 
Reloaded of 462 libraries in 816ms. 
Reloaded of 462 libraries in 654ms. 
Reloaded of 462 libraries in 633ms. 
Reloaded 462 libraries in 747ms. 
Reloaded of 462 libraries in 668ms. 


RI AKPOUNTS 


Reloaded 462 libraries in 689ms. 


a ESSE i Â ae e 8 

Ada yg lupa 

Disini buat lagi 

Double ratio = isinya perbandingan isi dgn totalvaluenya 


No Configuration 


VARIABLES ass tomP extends 
width, 
e value; 
totalValue; 


({this.width, this.value, this.totalValue)); 


rride 
build(Build ext context) { 
jouble = value / totalValue; 


sturn Row( 
mainAxisAlignment: M AxisA f .center, 
children: «Widget» | 
n( 
ns.timer, 
color: Colors.grey[700], 


Restarted application in 1,628ms. 


Disni kita akan kali kan ratio 
Kalau dia 10 per 100 


height: 
decoration: 


1 
10, 


color: 
borderRadius: 
); 

( 
borderRadius: 
elevation: 3, 
child: 

height: 10, 


( 
.grey[300], 


* Custom Progress Bar 
.circular(5)), 


.circular(5), 


width: width * ratio, 


duration: 
decoration: 


color: 


borderRadius: 


1 


Restarted application in 1,62 


Reloaded 1 of 462 libraries in 


Maka terisi 10 nya 
Lebih bagus buat bedakan warna nya 


(milliseconds: 


( 
.lightGreen, 


.circular(5)), 


500), 


Kalau ratio nya lebih kecil 0.3 atau 3096 maka jadi colors red dan kalau gk ratio nya 


0.6 atau 6096 m 


g 1 


dart 


levation: 3, 
wild: 
height: 10, 

width: width * ratio, 
duration: (milliseconds: 
decoration: ( 


color: 0.3) 
? 


(ratio « 
-red 
: (ratio < @.6) ? 

borderRadius: 


Restarted application in 1,628ms. 
Reloaded 1 of 462 libraries i 


P Type here t 


Maka dilihat jadi 


merah 


-yellow : 
-circular(5)), 


aka diberikan warna yelow kalau gk warna green 


500), 


.lightGreen, 


), 


( 
borderRadius: .circular(5), 
elevation: 
child: 
height: 10, 
width: width * ratio, 
duration: (milliseconds: 500), 
decoration: 
color: (ratio < 0 
? .red 
(ratio « @ 
borderRadius: .circular(5)), 


Restarted application in 1,628ms 

Reloaded 1 of 462 libraries in 722ms. 

Reloaded 1 of 462 libraries in 622ms. 

I/zygote64(28629): Do partial code cache collection, code-30KB, data-26KB 
/zygote64(28629): After code cache collection, code-30KB, data- B 


I/zygote64( 28629 Incr ing code cache capacity to 128KB 


Kalau misalkan diganti 
Value nya 50 


No Configur: 


context) { 


home: 
appBar: 


value: 50, 
totalValue: 
) 


Restarted appiication in 1,628 


Reloaded 1 of 462 libraries in 722ms. 
aded 1 of 462 librar 

/zygote64(28629): 
ygote64( 29): After code cache collection, code-30KB, data=26KB 
ygote64(28629): Increasing code cache capacity to 128KB 


of 462 libraries in 643ms. 


Warna kuning disni jelek warna nya ganti jadi ember400 


om Progress Bar 


Custom Progress Bar 


VARIABLES 


borderRadius: 
), 

( 
borderRadius: 
elevation: 3, 
child: 

height: 10, 
width: width * 
duration: 
decoration: 
color: 
? 


(ratio 


borderRadius: 


arted c ation 
of 462 1 


1 of 462 


in 1,628ms. 


oaded 1 braries in 722ms. 


libraries in 622 


Do partial code cache collection, 


/zygote64( 28629): 


PA 


Reloaded 1 of 462 libraries in 643ms. 


WARIABLES 


borderRadius: 
P 
( 
borderRadius: 
elevation: 
child: 
height: 10, 


After code cache collection, 


.circular(5)), 


.circular(5) 


ratio, 


(milliseconds: 


( 


500), 


(ratio « € 


.red 


« 0.6) ? . amber [460] .lightGreen, 


-circular(5)), 


code 
30KB, 


KB, data=26KB 


code data=26KB 


Increasing code cache capacity to 128KB 


.circular(5)), 


Custom Progress Bar 
.circular(5), 


width: width * ratio, 


duration: 
decoration: 
color: 
? Š 


(ratio 
borderRadius: 


l 


CALI STACK 


Reloaded ot 462 libraries 


libr 


Do partial code c 


in 722 
Reloaded of 462 


I/Zy 


ries in 622ms 


After code cache collection, 


I/Zy 
Reloaded 1 


6 Increasing code c 
of 462 1 
1 of 462 


in 643ms. 


—— 
moo Reloaded 
a 


Lebih oke 


libraries in 612 


che collection, 


(milliseconds: 


( 


(ratio < @ 


red 
< 0.6) ? . amber [490] 


.circular(5)), 


30KB, data-26KB 


code KB, data=26KB 


che capacity to 128KB 


eens 


"m 


Kalau full lalu dia berkurang jadi kuning lalu merah 
Biar bisa jalan kita buat seState maka kita add dulu 
Provider 


pubspecyami © 
Oren tooas 1 UNSAMED 

flutter 
. pa 


TWA(R DOMO 


flutter 


Reloaded 1 ot 462 libraries in 72 
Reloaded 1 of 462 libraries in 622ms. 
Do partial code cache collection, code-30KB, data-26KB 
: After code cache collection, code-30KB, data-26KB 
I/zygote64(28629): Increasing code cache capacity to 128KB 
Reloaded 1 of 462 libraries in 643ms. 


onse Reloaded 1 of 462 libraries in 612ms. 


DPENOUNGES. 


Maka kita kembali disni kita import dahulu 


mandwt e 


D 


package:flutter/material.dart'; 


TIMIR pemo 


main() => runApp( GDE 


build( context) { 
return 
home: 
appBar: ( 
("Custom Progress Bar" 


width: 


ualuns 


D oum Futter 


[timer demo] flutter packages get 
Running "flutter pub get" in timer demo... 


exit code @ 


DEPENDUNGES. 


Supaya mengunkan timer kita import aync 


import 
import 


3 import 
void main() => runApp(MyAp 


lass MyApp extends 
@override 
t build(Bui yntext context) { 
E 
home: 1 
appBar: A 
title: 
), 
body: ter( 
child: Custo 
width: 200, 


alun CA 


(timer demo) flutter packages get 
Running "flutter pub get" in timer demo... 
exit code @ 


Lalu kita bawah buat satu class namanya TimeState with ChangeNotifier 
Kita simpan 

Buat int time nya = 15 biar gk kelamaan 

Lalu buat getter nya 


Dan setter nya 


=> _time; 
newTime)f time = newTime; notifyListeners();) 


(timer demo) flutter packages get 
Running “flutter pub get" in timer demo... 
exit code 0 


Maka sudah selsai untuk TimeState nya 
Tambhkan subuah button 
Maka proggres nya kita bungkus dgn column 


Cross nya kita kasih center 
"E mm ves jebug Terminal Het 
verride 
iget build(Bui t context) { 
return Mat 
home: 
appBar: A 
title: 
», 
body: nter( 
child: Column( 
crossAxisAlignment: 
children: <Widget>[ 
j mPr 
width: 
value: 50, 
totalValue: 100, 
)» 
Ip 


nment.center, 


z 
[timer_demo] flutter packages get 
Running "flutter pub get" in timer_demo... 


exit code @ 


= e c 
Dibawha progressnya kasih jarak 10 
lu kita kasi reisedButton onprased kosongi dahulu tulisan nya nya start 


La 


J 


crossAxisAlignment: nent.center, 


children: «Widget»[ 
tomProgi Bari 
width: 206, 
value: 50, 
totalValue: 100, 


IA 
edBox(height: 10,), 


RaisedButton( 
child: Text( ) 
onPressed: () (), 
) 
If 
[timer_demo] flutter packages get 
Running “flutter pub get" in timer demo... 


exit code @ 


Tambahkan lagi main axisAlignment nya center 


mainAxisAlignment: MainAxisAlignment.center, 
crossAxisAlignment: Ss SAxisAlignment.center, 
children: <Widget>[ 
tomi gressBar( 
width: 200, 
value: 50, 
totalValue: 100, 
) 
zedBox(height: 10,), 
RaisedBu n( 
child: Text( DiS 
onPressed: () {}, 
) 
2 DUTP s 
[timer demo] flutter packages get 
Running "flutter pub get" in timer demo... 
exit code 0 


Button nya kasih 
Dan kasih style nya 


) 
zedBox( 
height: 

) 

RaisedButt 
color: rs.lightBlue, 
child: xt ( 

style: TextStyle(color: Color 

)s 
onPressed: () {}, 

) 

IF 


[timer demo] flutter packages get 
Running "flutter pub get" in timer demo... 
exit code 0 


Kalau sudah maka kita tambhakn changeNotifierProvider nya kita tambhkan 
Di route nya 

Pasang di columnya 

Dinsi klik kanan refactor bungkus center 

Tingal ganti changeNotifierProvider nya lalu tipenya <TimeState> 
Didalmnya buat buildernya 


home: 
appBar: 


builder: (context) => 
child: Column( 
mainAxisAlignment: MainAxis/ r .center, 
crossAxisAlignment: CrossAxisAlignment.center, 
children: «Widget»[ 
E rogr Bar( 
width: 200, 
value: 50, 
totalValue: 100, 
m 
izedBox( 


[timer demo] flutter packages get 
Running "flutter pub get" in timer demo... 
exit code 0 


Kalau sudah buat Consumer nya 

diraisedButton kita bungkus refactor 

Widget ganti consumer<TimeState> 

Lalu raisedBuutton ganti jadi builder context timeStatenay _ 


EN 
"mandet e 
children: «W et»[ 
ist zressBar( 
width: 200, 
value: 50, 
totalValue: 100, 
m 
edBox( 
height: 10, 
», 
isumer«TimeState»( 
builder: (context, timeState, _ 
color: Colors.lightBlue, 
child: t 


.white), 


onPressed: () (), 
1 


(timer demo) flutter packages get 
Running “flutter pub get" in timer demo... 
exit code @ 


Dan progrresButton juga sama 
Consumer 
Lalu disni valuenya ngikuti TimeState.time dai mengikuti value saat ini 


children: «W 
isu ‘r< 
builder: 


width: 200 


et»[ 


ter 


(context, timeState, _ 


value: timeState.timd, 


totalValue: 


)» 

)s 

izedBox( 
height: 

)s 
nsumer<Tin 
builder: 

color: 
child: Tex 


10, 


, 
style: 
Y 


2 om 


[timer demo] flutter packages get 


(context, timeState, _) 


100, 


>( 

=> | 
rs.lightBlue, 

( 


le(color: .white), 


Running "flutter pub get" in timer demo... 


exit code 0 


essBa 

width; 
value; 

t totalValue; 


({t is 


@override 


Widget build(BuildCo 


s.totalValue}); 


context) { 


ble ratio = value / totalValue; 


(timer demo) flutter packages get 
Running "flutter pub get" in timer demo... 
exit code @ 


Jadi integer 


Sekarang di onprased ketika ditekan kita akan mul;ai timer.periodik 


Duration steiuap 1 detik terus dia ngapain 
Diakan ubah si time nya 

Jadi setiap 15 maka di berkurang satu 

Da tambah perbandingan 

If teryata sudah 0 


Maka timer.cencel 


eo d 
Duiiger:; (context, 


.lightBlue, 


Lime»tate, 


Tart oema 


(color: 
onPressed: () ( 
.periodic( 
if (timeState.time 
timeState.time - 
»: 
if 


[timer_demo] flutter packages get 
Running "flutter pub get" in timer demo... 
exit code @ 


(seconds: 1), 
0) timer.cancel(); 


-white), 


(timer) { 


Jika sudah 0 maka timer nya kita hentikan kalau gk maka dia akan kurang 1 terus 


nya 15 


Total value karena kita buat max 15 


p mandat e 


< >( 


builder: 
width: 
value: 


(context, timeState, _ 


200, 


timeState.time, 


totalValue: 15, 


builder: 
color: 
child: 


>( 
(context, timeState, 
.lightBlue, 


"Start", 


style: 


m 


[timer demo] flutter packages get 


(color: 


Running "flutter pub get" in timer demo... 


exit code @ 


) 


Flutter 


builder: 
width: 


value: 
totalValue: 


height: 
)s 


isumer<T 
builder: 
color: 
child: 


style: 


» 


timeState.time, 
15, 


10, 
tate>( 


(context, timeState, 
.lightBlue, 


(color: 


(timer demo) flutter packages get 


Running "flutter pub get" 
exit code @ 


Dia full pertama kali 
Dia terus berkurang 


RL AKPOUNTS 


Disini eorr nya 


isumer< 


builder: 
width: 
value: 
totalValue: 


height: 
); 


isumer«Ti 


builder: 
color: 
child: 


style: 


), 


in timer_demo... 


ite»( 


(context, timeState, _ 


200, 
timeState.time, 
15 

, 


10 


, 


neState>( 
(context, timeState, 
.lightBlue, 


le(color: 


[timer demo] flutter packages get 
Running "flutter pub get" in timer demo... 
exit code 0 


=) 


=> Ral 


-white), 


No Configurations * 


VARIABLES 


>( 
builder: (context, timeState, _ 
width: 200, Custom Progress Bar 


value: timeState.time, 
totalValue: 15, 


>( 
builder: (context, timeState, _) => 
color: .lightBlue, 
child: 
"Start", 
style: (color: .white), 


» 


(timer demo) flutter packages get 
Running "flutter pub get" in timer demo... 
exit code @ 


BH P Type here k 


Disni kiita kebawah kita tambhkan else karena kira berikan kekurangan 


No Configu J mandat e 
Duiiger:; (Context, Limedtate, 


color: .lightBlue, 
child: 
“Start, 
style: (color: 
)» 
onPressed: () ( 
.periodic( (seconds: 1), (timer) ( 
(timeState.time -- 9) timer.cancel(); 


timeState.time -- 1, 


[timer demo] flutter packages get 
Running "flutter pub get" in timer demo... 
exit code 0 


BRLAKPOINTS 


Lalu kita restart lalu kita coba 


